<template>
  <a-list
      :loading="list_loading"
      :bordered="false"
      max-height="76vh"
      :pagination-props="pagination"
      @page-change="handlePaginationChange"
      :data="allData"
  >
    <template #item="{item}">
      <!--      <a-card style="border-radius: 10px;margin-bottom: 5px">-->
      <a-list-item-meta style="margin-top: 10px">
        <template #avatar>
          <a-image
              width="90"
              height="120"
              :src="item.cover_image"
              show-loader
          />
        </template>
        <template #title>
          <div style="text-align: left;font-size: 20px;font-weight: 800">
            {{ item.title }}
          </div>
        </template>
        <template #description>
          <div style="text-align: left;">
            <a-space>
              <template #split>
                <a-divider direction="vertical"/>
              </template>
              <div>
                <a-tooltip content="播放量">
                  <icon-eye/>
                </a-tooltip>
                {{ item.stats.view_count }}
              </div>
              <div>
                <a-tooltip content="评论量">
                  <IconMessage/>
                </a-tooltip>
                {{ item.stats.comment_count }}
              </div>
              <div>
                <a-tooltip content="收藏量">
                  <IconStar/>
                </a-tooltip>
                {{ item.stats.collect_count }}
              </div>
              <div>
                <a-tooltip content="点赞量">
                  <IconHeart/>
                </a-tooltip>
                {{ item.stats.like_count }}
              </div>
              <div>
                <a-tooltip content="分享量">
                  <icon-share-internal/>
                </a-tooltip>
                {{ item.stats.share_count }}
              </div>
            </a-space>
          </div>

          <div style="text-align: left;font-size: 12px;color: #888787">
            发布时间：{{ item.publish_time }}
          </div>
          <div style="text-align: left;font-size: 12px;color: #888787">
            更新时间：{{ item.last_update_date }}
          </div>
          <div style="text-align: left">
            <a-link
                :href="item.detail_page" target="_blank" class="p-0">
              详情
            </a-link>
          </div>
        </template>
      </a-list-item-meta>
      <a-divider :size="2" style="border-bottom-style: dotted"/>
      <!--      </a-card>-->
    </template>
  </a-list>
</template>
<script setup>
import {ref, onMounted} from "vue";
import {detailData} from "../../../api/monitorManageMG.js";
import {defineProps} from 'vue';
import {Message} from "@arco-design/web-vue";

const props = defineProps({platform: String})
const allData = ref()
const list_loading = ref(true)
const pagination = ref({
  current: 1,   // 当前页数
  pageSize: 20, // 每页条数
  total: 0,      // 数据总数
  hideOnSinglePage: true
});

//获取全部数据
async function fetchAllData(params) {
  try {
    const phoneList_res = await detailData(params);
    allData.value = phoneList_res.results;
    list_loading.value = false
    pagination.value.total = phoneList_res.total;
    pagination.value.current = phoneList_res.page;
  } catch (error) {
    Message.error(error.message);
  }
}

fetchAllData()

const handlePaginationChange = async (page) => {
  list_loading.value = true
  await fetchAllData({'page': page, 'platform': props.platform});
  list_loading.value = false
};
onMounted(async () => {
  console.log('组件已挂载到DOM！');
  // 这里可以执行任何需要在组件挂载后进行的操作
  // 例如，请求数据:
  await fetchAllData({'page': 1, 'platform': props.platform})
});
</script>

<style>

.arco-image-preview-close-btn {
  top: 60px
}

.arco-image-preview-img-container {
  max-height: 87%;
}
</style>